<template>
	<div class="page-banner">
		<div class="left" @contextmenu.prevent="openScenarioForm($event)">
			<p class="title">场景列表</p>
			<ul>
				<li
					v-for="(item, index) in options.scenario"
					:key="index"
					:class="{
						active: item.id == selects.scenarioId
					}"
					@click="changeScenario(item.id)"
					@contextmenu.prevent.stop="openScenarioForm($event, item)"
				>
					{{ item.name }}
				</li>
			</ul>
		</div>

		<!--用户数据明细-->
		<cl-crud class="right" @load="onLoadUser" v-if="selects.scenarioId === 1" key="1">
			<template #slot-filter>
				<div class="nav base-flex">
					<div class="nav-li" style="margin-left: 10px">
						<date-picker
							@change="
								val => refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
							@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div>
					<div class="nav-li" style="margin-left: 10px">
						<span style="font-size: 14px">类型：</span>
						<el-select
							size="mini"
							filterable
							placeholder="明细类型"
							v-model="selects.userType"
							style="width:120px;"
							@change="val => refresh({ type: val, page: 1 })"
						>
							<el-option label="全部" value></el-option>
							<el-option label="步数明细" :value="1"></el-option>
							<el-option label="金币明细" :value="2"></el-option>
						</el-select>
					</div>
					<div class="nav-li" style="margin-left: 10px">
						<span style="font-size: 14px">动作：</span>
						<el-select
							size="mini"
							filterable
							placeholder="动作"
							v-model="selects.sceneType"
							style="width:120px;"
							@change="val => refresh({ sceneType: val, page: 1 })"
						>
							<el-option label="全部"></el-option>
							<el-option label="收入" :value="1"></el-option>
							<el-option label="支出" :value="0"></el-option>
						</el-select>
					</div>
					<div class="nav-li" style="margin-left: 10px">
						<span style="font-size: 14px">场景：</span>
						<el-select
							size="mini"
							filterable
							placeholder="场景"
							v-model="selects.scene"
							style="width:120px;"
							@change="val => refresh({ scene: val, page: 1 })"
						>
							<el-option label="全部"></el-option>
							<el-option label="小气泡" :value="1"></el-option>
							<el-option label="同步数据" :value="2"></el-option>
							<el-option label="签到" :value="3"></el-option>
							<el-option label="步数兑币" :value="4"></el-option>
							<el-option label="限时红包" :value="5"></el-option>
							<el-option label="分享奖励" :value="6"></el-option>
							<el-option label="币兑红包" :value="7"></el-option>
							<el-option label="币兑礼品" :value="8"></el-option>
							<el-option label="公告奖励" :value="9"></el-option>
						</el-select>
					</div>
				</div>
			</template>
			<template #table-column-cost="{scope}">{{
				Number(scope.row.consume) > 0 ? '收入' : '支出'
			}}</template>
		</cl-crud>

		<!--小气泡点击统计-->
		<cl-crud class="right" @load="onLoadBubble" v-if="selects.scenarioId === 2" key="2">
			<template #slot-filter>
				<div class="nav base-flex">
					<div class="nav-li" style="margin-left: 10px">
						<date-picker
							@change="
								val => refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
							@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div>
					<div class="nav-li" style="margin-left: 10px">
						<el-select
							size="mini"
							filterable
							placeholder="气泡类型"
							v-model="selects.tipsType"
							style="width:120px;"
							@change="val => refresh({ type: val, page: 1 })"
						>
							<el-option label="全部" value></el-option>
							<el-option label="商品" :value="1"></el-option>
							<el-option label="跳转" :value="2"></el-option>
						</el-select>
					</div>
					<div class="nav-li" style="margin-left: 10px">
						<span style="font-size: 14px">数据来源：</span>
						<el-select
								size="mini"
								filterable
								placeholder="请选择数据来源"
								v-model="selects.app"
								style="width:140px;"
								@change="val => refresh({ app: val, page: 1 })"
						>
							<el-option label="本平台" :value="0"></el-option>
							<el-option label="全部关联平台" :value="1"></el-option>
						</el-select>
					</div>
				</div>
			</template>
			<template #table-column-status="{scope}">
				<el-tag type="danger" v-if="scope.row.status == 0">隐藏</el-tag>
				<el-tag v-if="scope.row.status == 1">显示</el-tag>
			</template>
			<template #table-column-type="{scope}">
				<el-tag v-if="scope.row.type == 1">商品</el-tag>
				<el-tag v-if="scope.row.type == 2">跳转</el-tag>
			</template>
		</cl-crud>

		<!--金刚位、5G权益-->
		<div class="cl-box" v-if="selects.scenarioId === 3 || selects.scenarioId === 5">
			<div class="cl-list">
				<div class="cl-item" v-for="(item, index) in bannerSubData" :key="index">
					<p>名称</p>
					<p class="red">{{ item.name }}</p>
					<p>点击量</p>
					<p class="red">{{ item.count }}</p>
				</div>
			</div>
			<div class="cl">
				<cl-crud class="right" @load="onLoadBanner" key="35">
					<template #slot-filter>
						<div class="nav base-flex">
							<div class="nav-li" style="margin-left: 1em">
								<date-picker
									@change="
										val =>
											refresh({ startTime: val[0], endTime: val[1], page: 1 })
									"
									@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
								></date-picker>
							</div>
							<div class="nav-li" style="margin-left: 10px" v-if="selects.scenarioId === 3">
								<span style="font-size: 14px">数据来源：</span>
								<el-select
										size="mini"
										filterable
										placeholder="请选择数据来源"
										v-model="selects.app"
										style="width:140px;"
										@change="val => refresh({ app: val, page: 1 })"
								>
									<el-option label="本平台" :value="0"></el-option>
									<el-option label="全部关联平台" :value="1"></el-option>
								</el-select>
							</div>
						</div>
					</template>
					<template #table-column-status="{scope}">
						<el-tag type="danger" v-if="scope.row.status == 'close'">隐藏</el-tag>
						<el-tag v-if="scope.row.status == 'open'">显示</el-tag>
					</template>
				</cl-crud>
			</div>
		</div>

		<!--每日抢红包-->
		<div class="cl-box" v-if="selects.scenarioId === 4">
			<div class="cl-list">
				<div class="cl-item" v-for="(item, index) in redSubData" :key="index">
					<p>时间点</p>
					<p class="red">{{ item.hour }}:00</p>
					<p>被抢数量</p>
					<p class="red">{{ item.robCount }}</p>
					<p>金额汇总</p>
					<p class="red">{{ item.totalMoney }}</p>
				</div>
			</div>
			<div class="cl">
				<cl-crud class="right" @load="onLoadRed" key="4">
					<template #slot-filter>
						<div class="nav base-flex">
							<div class="nav-li" style="margin-left: 1em">
								<date-picker
									@change="
										val =>
											refresh({ startTime: val[0], endTime: val[1], page: 1 })
									"
									@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
								></date-picker>
							</div>
							<div class="nav-li" style="margin-left: 10px">
								<span style="font-size: 14px">时间点：</span>
								<el-select
									size="mini"
									filterable
									placeholder="时间点"
									v-model="selects.hour"
									style="width:120px;"
									@change="val => refresh({ hour: val, page: 1 })"
								>
									<el-option label="全部" value></el-option>
									<el-option
										:label="
											(item.hour < 10 ? '0' + item.hour : item.hour) + ':00'
										"
										:value="item.hour"
										v-for="(item, index) in options.hourList"
										:key="index"
									></el-option>
								</el-select>
							</div>
						</div>
					</template>
					<template #table-column-hour="{scope}">
						{{ scope.row.hour < 10 ? '0' + scope.row.hour : scope.row.hour }}:00
					</template>
				</cl-crud>
			</div>
		</div>

		<!--兑红包明细-->
		<div class="cl-box" v-if="selects.scenarioId === 6">
			<div class="cl-list">
				<div class="cl-item" v-for="(item, index) in redSubChangeData" :key="index">
					<p>兑换面额</p>
					<p class="red">{{ item.cashValue }}</p>
					<p>被抢数量</p>
					<p class="red">{{ item.num }}</p>
					<p>金额汇总</p>
					<p class="red">{{ item.totalMoney }}</p>
				</div>
			</div>
			<div class="cl">
				<cl-crud class="right" @load="onLoadRedChange" key="6">
					<template #slot-filter>
						<div class="nav base-flex">
							<div class="nav-li" style="margin-left: 10px">
								<date-picker
									@change="
										val =>
											refresh({ startTime: val[0], endTime: val[1], page: 1 })
									"
									@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
								></date-picker>
							</div>
							<div class="nav-li" style="margin-left: 10px;">
								<span style="font-size: 14px">状态：</span>
								<el-select
									size="mini"
									filterable
									placeholder="提现状态"
									v-model="selects.redChangeType"
									style="width:120px;"
									@change="val => refresh({ type: val, page: 1 })"
								>
									<el-option label="全部" value></el-option>
									<el-option label="审核中" :value="0"></el-option>
									<el-option label="待打款" :value="1"></el-option>
									<el-option label="审核失败" :value="2"></el-option>
									<el-option label="提现成功" :value="3"></el-option>
									<el-option label="提现失败" :value="4"></el-option>
								</el-select>
							</div>
						</div>
					</template>
					<template #table-column-status="{scope}">
						<el-tag v-if="scope.row.status == 0">审核中</el-tag>
						<el-tag v-if="scope.row.status == 1">待打款</el-tag>
						<el-tag v-if="scope.row.status == 3">提现成功</el-tag>
						<el-tag type="danger" v-if="scope.row.status == 2">审核失败</el-tag>
						<el-tag type="danger" v-if="scope.row.status == 4">提现失败</el-tag>
					</template>
				</cl-crud>
			</div>
		</div>

		<!--兑礼品明细-->
		<div class="cl-box" v-if="selects.scenarioId === 7">
			<div class="cl-list">
				<div class="cl-item" v-for="(item, index) in goodsSubData" :key="index">
					<p>{{ item.goldAmount }}金币值兑换次数</p>
					<p class="red">{{ item.num }}</p>
					<p>消耗金币汇总</p>
					<p class="red">{{ item.totalAmount }}</p>
				</div>
			</div>
			<div class="cl">
				<cl-crud class="right" @load="onLoadGiftChange" key="7">
					<template #slot-filter>
						<div class="nav base-flex">
							<div class="nav-li" style="margin-left: 1em">
								<date-picker
									@change="
										val =>
											refresh({ startTime: val[0], endTime: val[1], page: 1 })
									"
									@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
								></date-picker>
							</div>
							<div class="nav-li" style="margin-left: 10px;">
								<span style="font-size: 14px">金币消耗：</span>
								<el-select
									size="mini"
									filterable
									placeholder="金币消耗"
									v-model="selects.goldAmount"
									style="width:120px;"
									@change="val => refresh({ goldAmount: val, page: 1 })"
								>
									<el-option label="全部" value></el-option>
									<el-option
										:label="item.goldAmount"
										:value="item.goldAmount"
										v-for="(item, index) in options.classifyList"
										:key="index"
									></el-option>
								</el-select>
							</div>
						</div>
					</template>
					<template #table-column-goodsInfo="{scope}">
						<div class="goods-item">
							<img :src="scope.row.pic" />
							<div class="content">
								<p class="title">{{ scope.row.title }}</p>
								<p>商品id：{{ scope.row.gid }}</p>
								<p>
									优惠券：
									<span>¥{{ scope.row.couponMoney }}</span
									>补贴金： <span>¥{{ scope.row.tljMoney }}</span
									>补贴价：
									<span
										>¥{{
											(
												Number(scope.row.endPrice) -
												Number(scope.row.tljMoney)
											).toFixed(2)
										}}</span
									>
								</p>
								<p>淘口令：{{ scope.row.tkl }}</p>
							</div>
						</div>
					</template>
					<template #table-column-userInfo="{scope}">
						<p>用户名：{{ scope.row.userName || '无' }}</p>
						<p>支付宝账号：{{ scope.row.aliUserId || '无' }}</p>
						<p>手机号：{{ scope.row.phone || '无' }}</p>
					</template>
				</cl-crud>
			</div>
		</div>

		<!--抽奖统计-->
		<cl-crud class="right" @load="onLoadLottery" v-if="selects.scenarioId === 8" key="8">
			<template #slot-filter>
				<div class="nav base-flex">
					<div class="nav-li" style="margin-left: 10px">
						<el-select
								size="mini"
								filterable
								placeholder="请选择时间类型"
								v-model="selects.timeType"
								style="width:140px;"
								@change="val => refresh({ timeType: val, page: 1 })"
						>
							<el-option label="打卡时间" :value="2"></el-option>
							<el-option label="创建时间" :value="1"></el-option>
						</el-select>
					</div>
					<div class="nav-li" style="margin-left: 10px">
						<date-picker
								@change="
								val => refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
								@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div>
					<div class="nav-li" style="margin-left: 10px">
						<span style="font-size: 14px">抽奖状态：</span>
						<el-select
								size="mini"
								filterable
								placeholder="抽奖状态"
								v-model="selects.isOpened"
								style="width:120px;"
								@change="val => refresh({ isOpened: val, page: 1 })"
						>
							<el-option label="全部" value></el-option>
							<el-option label="进行中" :value="0"></el-option>
							<el-option label="已开奖" :value="1"></el-option>
						</el-select>
					</div>
					<div class="nav-li" style="margin-left: 10px">
						<span style="font-size: 14px">兑奖状态：</span>
						<el-select
								size="mini"
								filterable
								placeholder="兑奖状态"
								v-model="selects.status"
								style="width:120px;"
								@change="val => refresh({ status: val, page: 1 })"
						>
							<el-option label="全部" value></el-option>
							<el-option label="未兑奖" :value="0"></el-option>
							<el-option label="已兑奖" :value="1"></el-option>
						</el-select>
					</div>
				</div>
			</template>
			<template #table-column-condition="{scope}">
				<p v-if="scope.row.type == 1">{{ scope.row.userCount }}人</p>
				<p v-if="scope.row.type == 2">开奖时间<br>{{ scope.row.endTime }}</p>
			</template>
			<template #table-column-isOpened="{scope}">
				<el-tag type="success" v-if="scope.row.isOpened == 0">进行中</el-tag>
				<el-tag type="info" v-if="scope.row.isOpened == 1">已开奖</el-tag>
			</template>
			<template #table-column-status="{scope}">
				<el-tag type="success" v-if="scope.row.status == 0">未兑奖</el-tag>
				<el-tag type="info" v-if="scope.row.status == 1">已兑奖</el-tag>
			</template>
			<template #slot-info="{scope}">
				<el-button type="text" @click="lotteryDetail(scope.row)">参与明细</el-button>
			</template>
		</cl-crud>

		<!--打卡统计-->
		<cl-crud class="right" @load="onLoadPunch" v-if="selects.scenarioId === 9" key="9">
			<template #slot-filter>
				<div class="nav base-flex">
					<div class="nav-li" style="margin-left: 10px">
						<el-select
								size="mini"
								filterable
								placeholder="请选择时间类型"
								v-model="selects.timeType"
								style="width:140px;"
								@change="val => refresh({ timeType: val, page: 1 })"
						>
							<el-option label="打卡时间" :value="2"></el-option>
							<el-option label="创建时间" :value="1"></el-option>
						</el-select>
					</div>
					<div class="nav-li" style="margin-left: 10px">
						<date-picker
								@change="
								val => refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
								@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div>
					<div class="nav-li" style="margin-left: 10px">
						<span style="font-size: 14px">打卡时长：</span>
						<el-select
								size="mini"
								filterable
								placeholder="请选择打卡时长"
								v-model="selects.type"
								style="width:140px;"
								@change="val => refresh({ type: val, page: 1 })"
						>
							<el-option label="全部" value></el-option>
							<el-option label="1日赛" :value="1"></el-option>
							<el-option label="2日赛" :value="2"></el-option>
							<el-option label="3日赛" :value="3"></el-option>
						</el-select>
					</div>
					<div class="nav-li" style="margin-left: 10px">
						<span style="font-size: 14px">状态：</span>
						<el-select
								size="mini"
								filterable
								placeholder="请选择打卡赛状态"
								v-model="selects.status"
								style="width:140px;"
								@change="val => refresh({ status: val, page: 1 })"
						>
							<el-option label="全部" value></el-option>
							<el-option label="未开始" :value="0"></el-option>
							<el-option label="进行中" :value="1"></el-option>
							<el-option label="已结束" :value="2"></el-option>
						</el-select>
					</div>
				</div>
			</template>
			<template #table-column-status="{scope}">
				<el-tag type="primary" v-if="scope.row.status == 0">未开始</el-tag>
				<el-tag type="success" v-if="scope.row.status == 1">进行中</el-tag>
				<el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
			</template>
			<template #table-column-successfulRate="{scope}">
				{{ Number(scope.row.successfulRate) * 100 }}%
			</template>
			<template #table-column-time="{scope}">
				<p>{{ scope.row.startTime }}</p>
				~
				<p>{{ scope.row.endTime }}</p>
			</template>
		</cl-crud>

		<!--优选出单统计-->
		<cl-crud class="right" @load="onLoadPreferred" v-if="selects.scenarioId === 10" key="10">
			<template #slot-filter>
				<div class="nav base-flex">
					<div class="nav-li" style="margin-left: 10px">
						<el-select
								size="mini"
								filterable
								placeholder="请选择订单状态"
								v-model="selects.tkStatus"
								style="width:140px;"
								@change="val => refresh({ tkStatus: val, page: 1 })"
						>
							<el-option label="全部订单" value></el-option>
							<el-option label="订单结算" :value="3"></el-option>
							<el-option label="订单付款" :value="12"></el-option>
							<el-option label="订单失效" :value="13"></el-option>
							<el-option label="订单成功" :value="14"></el-option>
						</el-select>
					</div>
					<div class="nav-li" style="margin-left: 10px">
						<el-select
								size="mini"
								filterable
								placeholder="请选择时间类型"
								v-model="selects.timeType"
								style="width:140px;"
								@change="val => refresh({ timeType: val, page: 1 })"
						>
							<el-option label="创建时间" :value="0"></el-option>
							<el-option label="付款时间" :value="1"></el-option>
							<el-option label="结算时间" :value="2"></el-option>
						</el-select>
					</div>
					<div class="nav-li" style="margin-left: 10px">
						<date-picker
								@change="
										val =>
											refresh({ startTime: val[0], endTime: val[1], page: 1 })
									"
								@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div>
				</div>
			</template>
			<template #slot-export>
<!--				<el-button type="primary" style="margin-left: 10px" size="mini" @click="exportRankReport"><i class="el-icon-download"></i>导出报表</el-button>-->
			</template>
			<template #table-column-goodsInfo="{scope}">
				<div class="goods-item">
					<img class="goods-img" :src="scope.row.itemImg" />
					<div class="content">
						<el-tooltip :content="scope.row.itemTitle" placement="top">
							<div class="title">
								<span class="source">淘宝</span>
								<a :href="scope.row.itemLink" target="_black">{{
									scope.row.itemTitle
									}}</a>
							</div>
						</el-tooltip>
						<p>商品id：{{ scope.row.itemId }}  {{ scope.row.mainName}}</p>
					</div>
				</div>
			</template>
		</cl-crud>

		<cl-context-menu ref="scenario-context-menu"></cl-context-menu>
		<cl-form ref="scenario-form"></cl-form>
		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
import moment from 'moment';
import RedProbability from './components/RedProbability';
import goodInfo from './components/ranking-goods';
import DatePicker from '@/components/common/date-picker';
import { download } from '@/utils/index';
import store from '@/utils/store';
import LotteryDetail from './components/LotteryDetail'
import { mapGetters } from 'vuex';
export default {
	components: {
		RedProbability,
		DatePicker,
		goodInfo
	},
	data() {
		return {
			crud: null,
			selects: {
				userType: '',
				tipsType: '',
				hour: '',
				scenarioId: 1,
				redChangeType: '',
				goldAmount: '',
				status: '',
				isOpened: '',
				type: '',
				tkStatus: '',
				timeType: 1,
				app: 0
			},
			redSubData: [],
			redSubChangeData: [],
			bannerSubData: [],
			goodsSubData: [],
			options: {
				scenario: [
					{
						id: 1,
						key: 'yhsj',
						name: '用户数据明细'
					},
					{
						id: 2,
						key: 'xqp',
						name: '小气泡点击统计'
					},
					{
						id: 3,
						key: 'jgw',
						name: '金刚位点击统计'
					},
					{
						id: 4,
						key: 'mrqhb',
						name: '每日抢红包明细'
					},
					{
						id: 5,
						key: '5gqy',
						name: '5G权益明细'
					},
					{
						id: 6,
						key: 'dhb',
						name: '兑红包明细'
					},
					{
						id: 7,
						key: 'dlp',
						name: '兑礼品明细'
					},
					{
						id: 8,
						key: 'cjtj',
						name: '抽奖统计'
					},
					{
						id: 9,
						key: 'dktj',
						name: '打卡统计'
					},
					{
						id: 10,
						key: 'yxcdtj',
						name: '优选出单统计'
					}
				],
				hourList: [],
				classifyList: []
			}
		};
	},
	created() {},
	activated() {
		if (this.$route.query.userId) {
			this.selects.scenarioId = 1;
			this.refresh({
				type: 1,
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59'),
				userId: this.$route.query.userId
			});
		}
	},
	computed: {
		...mapGetters(['platformVal']),
	},
	methods: {
		onLoadUser({ ctx, app }) {
			ctx.service(this.$service.interactiveSoft.marketingStatistics)
				.set('dict', {
					api: {
						page: 'userDetail'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'index',
							label: '序号',
							align: 'center'
						},
						{
							label: '用户名',
							prop: 'nickName',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '支付宝账号',
							prop: 'userId',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '手机账号',
							prop: 'phone',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '场景',
							prop: 'remark',
							align: 'center'
						},
						{
							label: '收入/支出',
							prop: 'cost',
							align: 'center'
						},
						{
							label: '步数/金币',
							prop: 'consume',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom'
						}
					],
					op: {
						visible: false
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh({
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			});
			this.crud = app;
		},
		onLoadBubble({ ctx, app }) {
			ctx.service(this.$service.interactiveSoft.marketingStatistics)
				.set('dict', {
					api: {
						page: 'bubbleSettingDetail'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'index',
							label: '序号',
							align: 'center'
						},
						{
							label: '名称',
							prop: 'name',
							align: 'center'
						},
						{
							label: '类型',
							prop: 'type',
							align: 'center'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '开始时间',
							prop: 'startTime',
							align: 'center'
						},
						{
							label: '结束时间',
							prop: 'endTime',
							align: 'center'
						},
						{
							label: '点击量',
							prop: 'clickNum',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '日期',
							prop: 'date',
							align: 'center',
							sortable: 'custom'
						}
					],
					op: {
						visible: false
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();
			// let params = {};
			// if (this.selects.app === 1) {
			// 	params.app = null;
			// } else {
			// 	params.app = store.get('platForm');
			// }
			app.refresh({
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59'),
				// ...params
			});
			this.crud = app;
		},
		onLoadBanner({ ctx, app }) {
			ctx.service(this.$service.interactiveSoft.marketingStatistics)
				.set('dict', {
					api: {
						page: 'clickStatistics'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'index',
							label: '序号',
							align: 'center'
						},
						{
							label: '名称',
							prop: 'name',
							align: 'center'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '排序',
							prop: 'level',
							align: 'center'
						},
						{
							label: '点击量',
							prop: 'count',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '日期',
							prop: 'date',
							align: 'center',
							sortable: 'custom'
						}
					],
					op: {
						visible: false
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next, render }) => {
					let { list, subData } = await next(params);

					this.bannerSubData = subData;

					render(list);
				})
				.done();

			let params = {};
			// if (this.selects.app === 1) {
			// 	params.app = null;
			// } else {
			// 	params.app = store.get('platForm');
			// }
			app.refresh({
				type: this.selects.scenarioId === 3 ? 1 : 2,
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59'),
				// ...params
			});
			this.crud = app;
		},

		onLoadRed({ ctx, app }) {
			ctx.service(this.$service.interactiveSoft.marketingStatistics)
				.set('dict', {
					api: {
						page: 'robMoneyDetail'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center'
						},
						{
							label: '用户名',
							prop: 'nickName',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '支付宝账号',
							prop: 'userId',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '手机账号',
							prop: 'phone',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '时间点',
							prop: 'hour',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '抢到金额',
							prop: 'realMoney',
							align: 'center'
						},
						{
							label: '消耗金币数',
							prop: 'goldMoney',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom'
						}
					],
					op: {
						visible: false
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next, render }) => {
					let { list, subData } = await next(params);

					this.redSubData = subData;

					render(list);
				})
				.done();

			app.refresh({
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			});
			this.crud = app;
		},
		onLoadRedChange({ ctx, app }) {
			ctx.service(this.$service.interactiveSoft.marketingStatistics)
				.set('dict', {
					api: {
						page: 'withdrawDetail'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center'
						},
						{
							label: '用户名',
							prop: 'nickName',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '支付宝账号',
							prop: 'account',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '手机账号',
							prop: 'phone',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '提现金额',
							prop: 'amount',
							align: 'center'
						},
						{
							label: '消耗金币',
							prop: 'goldAmount',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom'
						}
					],
					op: {
						visible: false
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next, render }) => {
					let { list, subData } = await next(params);

					this.redSubChangeData = subData;

					render(list);
				})
				.done();

			app.refresh({
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			});
			this.crud = app;
		},
		onLoadGiftChange({ ctx, app }) {
			ctx.service(this.$service.interactiveSoft.marketingStatistics)
				.set('dict', {
					api: {
						page: 'goodslistDetail'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center'
						},
						{
							label: '商品信息',
							prop: 'goodsInfo',
							align: 'center',
							width: 550
						},
						{
							label: '用户信息',
							prop: 'userInfo',
							align: 'center',
							width: 200
						},
						{
							label: '金币消耗',
							prop: 'goldAmount',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom'
						}
					],
					op: {
						visible: false
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next, render }) => {
					let { list, subData } = await next(params);

					this.goodsSubData = subData;

					render(list);
				})
				.done();

			app.refresh({
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			});
			this.crud = app;
		},

		onLoadLottery({ ctx, app }) {
			ctx.service(this.$service.interactiveSoft.marketingStatistics)
					.set('dict', {
						api: {
							page: 'lotteryActivityStatistics'
						}
					})
					.set('table', {
						columns: [
							{
								label: '序号',
								type: 'index',
								align: 'center'
							},
							{
								label: '奖品名称',
								prop: 'name',
								align: 'center',
								minWidth: 150
							},
							{
								label: '数量',
								prop: 'num',
								align: 'center',
							},
							{
								label: '类型',
								prop: 'type',
								align: 'center',
								dict: [
									{
										label: '按人数开奖',
										value: 1
									},
									{
										label: '按时间开奖',
										value: 2
									}
								]
							},
							{
								label: '条件',
								prop: 'condition',
								align: 'center',
								minWidth: 120
							},
							{
								label: '状态',
								prop: 'isOpened',
								align: 'center',
							},
							{
								label: '兑奖状态',
								prop: 'status',
								align: 'center',
							},
							{
								label: '浏览PV',
								prop: 'pv',
								align: 'center'
							},
							{
								label: '浏览UV',
								prop: 'uv',
								align: 'center'
							},
							{
								label: '参与人数',
								prop: 'alreadyJoinedUserNumber',
								align: 'center'
							},
							{
								label: '机器人数',
								prop: 'alreadyJoinedRobotUserNumber',
								align: 'center'
							},
							{
								label: '创建时间',
								prop: 'createTime',
								align: 'center',
								minWidth: 130,
								sortable: 'custom'
							}
						],
						op: {
							layout: ['slot-info']
						},
					})
					.set('layout', [
						['refresh-btn', 'slot-filter', 'flex1', 'search-key'],
						['data-table'],
						['flex1', 'pagination']
					])
					.on('refresh', async (params, { next, render }) => {
						let { list, subData } = await next(params);

						this.goodsSubData = subData;

						render(list);
					})
					.done();

			app.refresh({
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59'),
				timeType: this.selects.timeType
			});
			this.crud = app;
		},

		onLoadPunch({ ctx, app }) {
			ctx.service(this.$service.interactiveSoft.marketingStatistics)
					.set('dict', {
						api: {
							page: 'signRecord'
						}
					})
					.set('table', {
						columns: [
							{
								label: '序号',
								type: 'index',
								align: 'center'
							},
							{
								label: '打卡时长',
								prop: 'type',
								align: 'center',
								dict: [
									{
										label: '1日赛',
										value: 1
									},
									{
										label: '2日赛',
										value: 2
									},
									{
										label: '3日赛',
										value: 3
									}
								]
							},
							{
								label: '打卡时间',
								prop: 'time',
								align: 'center',
								minWidth: 150
							},
							{
								label: '押金',
								prop: 'amount',
								align: 'center',
							},
							{
								label: '步数条件',
								prop: 'stepNum',
								align: 'center',
							},
							{
								label: '状态',
								prop: 'status',
								align: 'center',
							},
							{
								label: '报名人数',
								prop: 'totalUserCount',
								align: 'center',
							},
							{
								label: '成功打卡人数',
								prop: 'successfulUserCount',
								align: 'center',
								minWidth: 130,
							},
							{
								label: '打卡率',
								prop: 'successfulRate',
								align: 'center'
							},
							{
								label: '本期奖池',
								prop: 'totalReward',
								align: 'center'
							},
							{
								label: '创建时间',
								prop: 'createTime',
								align: 'center',
								minWidth: 130,
								sortable: 'custom'
							}
						],
						op: {
							visible: false
						}
					})
					.set('layout', [
						['refresh-btn', 'slot-filter', 'flex1', 'search-key'],
						['data-table'],
						['flex1', 'pagination']
					])
					.done();

			app.refresh({
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59'),
				timeType: this.selects.timeType
			});
			this.crud = app;
		},

		onLoadPreferred({ ctx, app }) {
			ctx.service(this.$service.statisticalForm.orderList)
					.set('dict', {
						api: {
							page: 'millionItemRank'
						}
					})
					.set('table', {
						columns: [
							{
								label: '序号',
								type: 'index',
								align: 'center'
							},
							{
								label: '商品信息',
								prop: 'goodsInfo',
								align: 'center',
								width: 550
							},
							// {
							// 	label: '排序',
							// 	prop: 'level',
							// 	align: 'center',
							// 	sortable: 'custom'
							// },
							{
								label: '有效佣金',
								prop: 'orderCommission',
								align: 'center',
								sortable: 'custom',
							},
							{
								label: '消耗淘礼金',
								prop: 'tljMoney',
								align: 'center',
								sortable: 'custom',
								minWidth: 120
							},
							{
								label: '总订单数',
								prop: 'orderNum',
								align: 'center',
								sortable: 'custom',
							},
							{
								label: '失效订单',
								prop: 'invalidOrderNum',
								align: 'center',
								sortable: 'custom',
							},
							{
								label: '有效订单',
								prop: 'validOrderNum',
								align: 'center',
								sortable: 'custom',
							},
							{
								label: '点赞数',
								prop: 'userLikeNum',
								align: 'center',
								sortable: 'custom',
							}
						],
						op: {
							visible: false
						},
						props: {
							'default-sort': {
								order: 'descending',
								prop: 'orderNum'
							}
						}
					})
					.set('layout', [
						['refresh-btn', 'slot-filter', 'slot-export', 'flex1', 'search-key'],
						['data-table'],
						['flex1', 'pagination']
					])
					.done();
			app.refresh({
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			});
			this.crud = app;
		},

		refresh(params) {
			if (params.app === 1) {
				this.crud.refresh({
					...params,
					app: null
				});
			} else {
				this.crud.refresh({
					...params,
					app: store.get('platForm')
				});
			}
		},

		changeScenario(id) {
			this.selects.scenarioId = id;
			this.$nextTick(() => {
				if (id == 3 || id == 5) {
					let type;
					if (id === 3) {
						type = 1;
					}
					if (id === 5) {
						type = 2;
					}
					this.crud.refresh({ type: type });
				}
			});
			// 获取抢红包时间点列表
			if (id === 4) {
				// options.hourList
				this.$service.interactiveSoft.robMoney
					.page({
						type: 1,
						status: 1
					})
					.then(res => {
						this.options.hourList = res.list;
					});
			}
			// 获取兑礼品分类
			if (id === 7) {
				this.$service.interactiveSoft.giftClassify
					.page({
						sort: 'asc',
						order: 'level'
					})
					.then(res => {
						this.options.classifyList = res.list;
					});
			}
		},

		openScenarioForm(event, data) {
			let list = [];

			if (!data) {
				list = [
					{
						label: '新增',
						'suffix-icon': 'el-icon-plus',
						callback: (item, done) => {
							this.upsertScenario();
							done();
						}
					}
				];
			} else {
				list = [
					{
						label: '编辑',
						'suffix-icon': 'el-icon-edit',
						callback: (item, done) => {
							this.upsertScenario(data);
							done();
						}
					}
				];
			}

			this.$refs['scenario-context-menu'].open(event, {
				list
			});
		},

		upsertScenario(item = {}) {
			this.$refs['scenario-form'].open({
				props: {
					title: '场景编辑',
					width: '500px',
					'label-width': '100px'
				},

				items: [
					{
						label: '场景名称',
						prop: 'name',
						value: item.name,
						component: {
							name: 'el-input',
							attrs: {
								placeholder: '请填写场景名称'
							}
						}
					},
					{
						label: '场景关键字',
						prop: 'key',
						value: item.key,
						component: {
							name: 'el-input',
							attrs: {
								placeholder: '请填写场景关键字'
							}
						}
					}
				],

				on: {
					submit: ({ data, done, close }) => {
						const fn = item.id ? 'update' : 'add';

						this.$service.systemMenagement.bannerScenario[fn]({
							...data,
							id: item.id
						})
							.then(() => {
								this.$message.success('保存成功');
								this.refreshScenario();
								close();
							})
							.catch(err => {
								this.$message.error(err);
								done();
							});
					}
				}
			});
		},

		lotteryDetail(item) {
			let params = {};
			if (this.selects.app === 1) {
				params.app = null;
			}
			this.$service.interactiveSoft.lotteryActivity.lotteryParticipant({
				id: item.id,
				...params
			}).then(res => {
				if (res.lotteryParticipant.length > 0) {
					this.$refs['cl-form'].open({
						props: {
							title: '参与明细',
							width: '950px',
							'label-width': '0px'
						},
						items: [
							{
								prop: 'lotteryDetail',
								value: res,
								component: LotteryDetail
							},
						],
					});
				} else {
					this.$message.error('暂无信息')
				}
			});
		},

		exportRankReport() {
			this.$service.statisticalForm.orderList
					.millionItemRankExport({
						startTime: this.crud.getData('params').startTime,
						endTime: this.crud.getData('params').endTime
					})
					.then(res => {
						download({
							data: res,
							fileName: `百亿补贴出单排行-${moment().format('YYYY-MM-DD HH:mm:ss')}`
						});
					})
					.catch(err => {
						this.$message.error(err);
					});
		},
	},
	watch: {
		platformVal(val) {
			if (this.selects.app === 1) {
				this.crud.refresh({
					app: null
				});
			}
		}
	}
};
</script>

<style lang="stylus">
.page-banner {
  display: flex;

  .left {
    min-width: 230px;
    background-color: #fff;
    margin-right: 10px;

    .title {
      font-size: 15px;
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      border-bottom: 1px solid #f7f7f7;
      box-sizing: border-box;
    }

    ul {
      overflow: auto;
      height: calc(100% - 40px);

      li {
        list-style: none;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        font-size: 14px;
        cursor: pointer;

        &.active, &:hover {
          background-color: #eee;
        }
      }
    }
  }

  .right {
    flex: 1;
  }
}

.cl-box {
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px 0;

  .cl-list {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;

    .cl-item {
      display: inline-block;
      margin: 0 30px;
      text-align: center;

      .red {
        color: red;
        margin-top: 10px;
        margin-bottom: 20px;
      }
    }
  }

  .cl {
    flex: 1;
    overflow: auto;

    .right {
      overflow: auto !important;

      .goods-item {
        display: flex;

        img {
          width: 100px;
          height: 100px;
        }

        .content {
          margin-left: 10px;
          text-align: left;
          flex: 1;

          .title {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 4px;
            color: #000;
          }

          span {
            color: red;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
.goods-item {
	display: flex;
	img {
		min-width: 72px;
		height: 72px;
		border-radius: 5px;
	}
	.content {
		margin-left: 9px;
		text-align: left;
		.title {
			color: #333333;
			font-weight: bold;
			font-size: 14px;
			width: 400px;
			textOverflow(1) ;
			a {
				color: #333;
			}
			cursor: pointer;
			:hover {
				color: #409EFF;
			}
		}
		.num {
			margin-top: 10px;
			color: #999999;
			font-size: 12px;
			line-height: 16px;
			.date {
				margin-right: 50px;
			}
		}
	}
	.source {
		background-color: red;
		color: #fff;
		border-radius: 3px;
		font-size: 12px;
		padding: 2px;
		transform: scale(0.9);
		letter-spacing: 1px;
		margin-right: 5px;
	}
}
</style>
